<template>
  <div>
    <div class="df">
      <!-- 头部组件 -->
      <tab :zt="rem" @remb="remb" @logint="logint"></tab>
    </div>
    <!-- 商品栏 -->
    <div class="d1">
      <div class="d2">shoppe</div>
      <!-- 选项卡切换效果 导航栏 -->
      <div class="d3">
        <div class="d7">
          <!-- 每一项 导航栏 -->
          <!-- 通过zt判断是否变色选中 默认为0 默认选中首页 -->
          <p :class="zt == 0 ? 'p' : 'p1'" @click="bh(0)">首页</p>
          <p :class="zt == 1 ? 'p' : 'p1'" @click="bh(1)">全部</p>
          <p :class="zt == 2 ? 'p' : 'p1'" @click="bh(2)">关于商品</p>
        </div>
      </div>
      <div class="d4">
        <!-- 搜索框 -->
        <div class="d5">
          <el-input placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 登陆组件 -->
    <div>
      <login :loginf="loginf" @login1="login1"></login>
    </div>
    <!-- 内容区 -->
    <div class="box">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import tab from "./zj/tab"; //顶部导航
import login from "./zj/login.vue"; //登陆
export default {
  components: {
    tab,
    login,
  },
  // 判断是否登陆
  beforeRouteUpdate(to, from, next) {
    // 如果是跳转敏感路由则
    if (to.path == "/gwc" || to.path == "/detai" || to.path == "/storea") {
      let token = sessionStorage.getItem("token");
      // 通过token判断是否登陆
      if (token == null) {
        // 弹出登录框
        this.rem = -1;
        // 取消样式
        this.loginf = true;
        // 停止
        return false;
      } else {
        next();
      }
    }
    //  如果不是敏感路油通信
    next();
  },

  data() {
    return {
      zt: 0, //判断是否变色
      loginf: false, //登陆页面是否出现
      rem: -1,
    };
  },
  methods: {
    bh(a) {
      //切换变色
      this.zt = a;
      //路由跳转
      this.zt == 0
        ? this.$router.push("/home")
        : this.zt == 1
        ? this.$router.push("/list")
        : this.zt == 2
        ? this.$router.push("/wod")
        : alert("其实这个弹框不会触发");
    },
    login1(a) {
      //登陆框不见
      this.loginf = a;
    },
    remb(a) {
      //颜色切换
      this.rem = a;
    },
    logint(s) {
      //点击
      if (s == 0.1) {
        this.loginf = true;
      }
      if (s == 0.2) {
        //退出

        this.$confirm("此操作 退出, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 收藏用户名
            this.$store.commit("names", true);
            // 清除token
            sessionStorage.clear();
            this.$message({
              type: "success",
              message: "退出成功!",
            });
          })
          .catch(() => {
            // 取消删除
            this.$message({
              type: "info",
              message: "已取消 ",
            });
          });
      }
    },
  },
};
</script>
<style scoped>
.d1 {
  width: 100%;

  height: 79px;
  display: flex;
  text-align: center;
  border-bottom: 2px#c0c0c0 solid;
}

.d2 {
  line-height: 80px;
  color: #000;
  font-size: 39px;
  flex: 2;
}
.d3 {
  flex: 4;
}
.d4 {
  flex: 3;
}
.d5 {
  width: 80%;
  margin: auto;
  margin-top: 20px;
}
.d7 {
  width: 60%;
  font-size: 15px;
  height: 100%;
}
p {
  display: inline-block;
  margin: 0;
}
.p {
  text-align: center;
  height: 100%;

  line-height: 99px;
  width: 33%;
  color: blue;
  border-bottom: blue 2px solid;
}
.p1 {
  text-align: center;
  height: 100%;

  line-height: 99px;
  width: 33%;
  color: #000;
  border-bottom: #c0c0c0 2px solid;
}
</style>